<template>
    <div class="login-container">
        <div class="login-header">
            <img :src="LOGO_SRC"  class="logo-img" />
            <h1 class="system-title">{{ SYSTEM_TITLE }}</h1>
        </div>
        <div class="login-wrapper">
            <div class="login-form-container-left">
                <img :src="LEFT_DECORATION_SRC" >
            </div>
            <div class="login-form-container-right">
                <AccountLoginForm :loading="isLoading" @submit="handleLogin" ref="loginFormRef"
                    :errorMessage="errorMessage" @error="handleError" @loginTypeChange="handleLoginTypeChange" />
            </div>
        </div>

        <div class="login-footer">
            <a href="#" class="footer-info-link">{{ COPYRIGHT }}</a>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import {
    LEFT_DECORATION_SRC,
    COPYRIGHT,
    ERROR_MESSAGES,
    SYSTEM_TITLE,
    LOGO_SRC,
} from '@/constants/login.js'
import loginService from '@/service/loginService'
import AccountLoginForm from '@/components/common/AccountLoginForm.vue'
import { ROUTE_NAMES } from '@/constants/routes.js'
import { isPC } from '@/service/commonService'
const router = useRouter()

// 响应式数据
const isLoading = ref(false)
const loginFormRef = ref(null)

const errorMessage = ref('')
const handleError = (message) => {
    errorMessage.value = message
}
const loginType = ref('sms')
// 登录类型切换
const handleLoginTypeChange = (type) => {
    Funcs.Notify('提示', '暂未实现。', 'warning');
    return
    loginType.value = type
    loginFormRef.value.resetForm()
    errorMessage.value = ''
}
// 登录处理
const handleLogin = async (formData) => {

    isLoading.value = true

    try {
        // 调用登录服务
        const result = await loginService.login({
            username: formData.username,
            password: formData.password,
        })
        isPC() ? router.push({ name: ROUTE_NAMES.PC_BLANK }) : window.location.href = `${window.location.origin}/hardcode/mweb`
        Funcs.Notify('提示', '登录成功', 'success');
    } catch (error) {
        console.error('登录异常:', error)
        errorMessage.value = ERROR_MESSAGES.NETWORK_ERROR
    } finally {
        isLoading.value = false
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #e9f1f5, #fff);
}

.login-wrapper {
    width: 100%;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.login-form-container-left {
    width: 1014px;
    height: 393px;

    img {
        height: 393px;
    }
}

.login-form-container-right {
    height: 393px;
    box-shadow: 0 0 10px hsla(0, 2%, 39%, .3);
    background-color: #fff;
    position: relative;
    width: 364px;
    padding: 30px;
}


.login-header {
    height: var(--login-header-height);
    margin: 0;
    padding-left: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}


.logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.system-title {
    font-size: 18px;
    color: #434343;
    font-weight: 700;
}



.footer-info-link {
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, .87);
    text-decoration: none;
    white-space: nowrap;

    &:hover {
        color: var(--theme-color);
    }
}



.login-footer {
    width: 100%;
    text-align: center;
    height: 120px;
    display: flex;
    justify-content: center;
}

// 响应式样式：屏幕宽度小于1200px时隐藏左侧装饰图片
@media (max-width: 1200px) {
    .login-form-container-left {
        display: none;
    }
}

@media (max-width: 768px) {
    .login-wrapper {
        max-width: 90vw;
    }

    .footer-info-link {
        width: 364px;
        display: block;
        text-align: left;
        
    }
    .login-footer {
        max-width: 90vw;
    }
}
</style>